<template>
    <div
        ref="chart"
        style="width:100%;height:100%"
        v-loading="loading"
        element-loading-text="Loading..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
    ></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();
const props = defineProps({
    option: {
        type: [Object, Array]
    },
})
const chart = ref(null)
const loading = ref(false)
let myChart = null
function drawLine () {
    if (!myChart) {
        myChart = echarts.init(chart.value)
        myChart.setOption(props.option)
        window.addEventListener('resize', function () {
            myChart.resize()
        })
    } else {
        myChart.setOption(props.option)
    }
}
function hideLoading () {
    loading.value = false
}
function showLoading () {
    loading.value = true

}

watch(
    () => props.option,
    (newValue, oldValue) => {
        drawLine()
    },
    {
        deep: true // 启用深度监听
    }
);
watch(
    () => appStore.sidebar.opened,
    (newValue, oldValue) => {
        setTimeout(() => {
            myChart.resize()
        }, 200);
    },
    {
        deep: true // 启用深度监听
    }
);

onMounted(() => {
    drawLine()
})
onUnmounted(() => {
    if (myChart) {
        myChart.clear()
    }
})
</script>

<style></style>
